<template>
  <div class="test">
    {{ value }}
    <!-- <input
      type="text"
      :value="value"
      @input="handleInput"
    /> -->

    <input
      type="text"
      v-model="value"
    />
    <!--
      v-model 双向数据绑定的原理

        1. 在input上使用v-bind的方式绑定数据
        2. 在input上使用@input的方式监听 input输入的内容，
        输入新的内容之后重新给数据赋值最新的值
     -->
  </div>
</template>
<script>
export default {
  data() {
    return {
      value: ''
    }
  },
  methods: {
    // handleInput(e) {
    //   this.value = e.target.value
    // }
  }
}
</script>
<style lang="scss" scoped></style>
